<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>教务系统 - 系统设置</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <!-- Tailwind 配置 -->
    <script>
        tailwind.config = {
            darkMode: "class",
            theme: {
                extend: {
                    colors: {
                        primary: "#165DFF",
                        secondary: "#36CFC9",
                        success: "#52C41A",
                        warning: "#FAAD14",
                        danger: "#FF4D4F",
                        info: "#8C8C8C",
                        "bg-light": "#F5F7FA",
                        "bg-dark": "#1D2129",
                    },
                    fontFamily: {
                        inter: ["Inter", "system-ui", "sans-serif"],
                    },
                },
            }
        }
    </script>
</head>
<body class="font-inter bg-bg-light dark:bg-bg-dark transition-colors duration-300">
<div id="app">
    <!-- 导航栏 -->
    <navigation></navigation>
    <!-- 侧边栏 -->
    <sidebar></sidebar>

    <!-- 主内容区 -->
    <main class="pt-16 lg:pl-64 min-h-screen">
        <div class="container mx-auto px-6 py-8">
            <!-- 页面标题 -->
            <div class="bg-white dark:bg-gray-800 rounded-xl p-6 mb-6 shadow-sm">
                <h2 class="text-2xl font-bold text-gray-800 dark:text-white">系统设置</h2>
                <p class="text-gray-600 dark:text-gray-400 mt-1">管理你的个人信息和系统偏好</p>
            </div>

            <!-- 设置卡片 -->
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <!-- 个人信息 -->
                <div class="bg-white dark:bg-gray-800 rounded-xl p-6 shadow-sm hover:shadow-md transition-shadow">
                    <div class="flex items-center mb-4">
                        <div class="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center mr-3">
                            <i class="fa fa-user text-primary"></i>
                        </div>
                        <h3 class="text-lg font-semibold text-gray-800 dark:text-white">个人信息</h3>
                    </div>
                    <p class="text-gray-600 dark:text-gray-400 mb-4">管理你的基本资料和联系方式</p>
                    <div class="space-y-3">
                        <div class="flex items-center justify-between">
                            <span class="text-gray-700 dark:text-gray-300">姓名</span>
                            <span class="text-gray-900 dark:text-white font-medium">{{adminName}}</span>
                        </div>
                         <div class="flex items-center justify-between">
                            <span class="text-gray-700 dark:text-gray-300">工号</span>
                            <span class="text-gray-900 dark:text-white font-medium">20210613</span>
                        </div>
                        <div class="flex items-center justify-between">
                            <span class="text-gray-700 dark:text-gray-300">所属院系</span>
                            <span class="text-gray-900 dark:text-white font-medium">信息学院</span>
                        </div>
                        <div class="flex items-center justify-between">
                            <span class="text-gray-700 dark:text-gray-300">电子邮箱</span>
                            <span class="text-gray-900 dark:text-white font-medium">{{adminEmail}}</span>
                        </div>
                    </div>
                    <button class="mt-6 w-full py-2 border border-primary text-primary rounded-lg hover:bg-primary hover:text-white transition-colors">
                        编辑信息
                    </button>
                </div>

                <!-- 通知设置 -->
                <div class="bg-white dark:bg-gray-800 rounded-xl p-6 shadow-sm hover:shadow-md transition-shadow">
                    <div class="flex items-center mb-4">
                        <div class="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center mr-3">
                            <i class="fa fa-bell text-primary"></i>
                        </div>
                        <h3 class="text-lg font-semibold text-gray-800 dark:text-white">通知设置</h3>
                    </div>
                    <p class="text-gray-600 dark:text-gray-400 mb-4">管理各类通知的接收方式和提醒时间</p>
                    <div class="space-y-3">
                        <div class="flex items-center justify-between">
                            <span class="text-gray-700 dark:text-gray-300">系统公告</span>
                            <label class="relative inline-flex items-center cursor-pointer">
                                <input type="checkbox" checked class="sr-only peer">
                                <div class="w-9 h-5 bg-gray-200 peer-focus:outline-none peer-focus:ring-2 peer-focus:ring-primary/30 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[1px] after:left-[1px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all dark:border-gray-600 peer-checked:bg-primary"></div>
                            </label>
                        </div>
                        <div class="flex items-center justify-between">
                            <span class="text-gray-700 dark:text-gray-300">课程提醒</span>
                            <label class="relative inline-flex items-center cursor-pointer">
                                <input type="checkbox" checked class="sr-only peer">
                                <div class="w-9 h-5 bg-gray-200 peer-focus:outline-none peer-focus:ring-2 peer-focus:ring-primary/30 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[1px] after:left-[1px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all dark:border-gray-600 peer-checked:bg-primary"></div>
                            </label>
                        </div>
                        <div class="flex items-center justify-between">
                            <span class="text-gray-700 dark:text-gray-300">作业提醒</span>
                            <label class="relative inline-flex items-center cursor-pointer">
                                <input type="checkbox" checked class="sr-only peer">
                                <div class="w-9 h-5 bg-gray-200 peer-focus:outline-none peer-focus:ring-2 peer-focus:ring-primary/30 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[1px] after:left-[1px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all dark:border-gray-600 peer-checked:bg-primary"></div>
                            </label>
                        </div>
                        <div class="flex items-center justify-between">
                            <span class="text-gray-700 dark:text-gray-300">考试提醒</span>
                            <label class="relative inline-flex items-center cursor-pointer">
                                <input type="checkbox" checked class="sr-only peer">
                                <div class="w-9 h-5 bg-gray-200 peer-focus:outline-none peer-focus:ring-2 peer-focus:ring-primary/30 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[1px] after:left-[1px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all dark:border-gray-600 peer-checked:bg-primary"></div>
                            </label>
                        </div>
                    </div>
                    <button class="mt-6 w-full py-2 border border-primary text-primary rounded-lg hover:bg-primary hover:text-white transition-colors">
                        详细设置
                    </button>
                </div>
            </div>

            <!-- 外观设置 -->
            <div class="bg-white dark:bg-gray-800 rounded-xl p-6 shadow-sm mt-6">
                <div class="flex items-center mb-4">
                    <div class="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center mr-3">
                        <i class="fa fa-paint-brush text-primary"></i>
                    </div>
                    <h3 class="text-lg font-semibold text-gray-800 dark:text-white">外观设置</h3>
                </div>
                <p class="text-gray-600 dark:text-gray-400 mb-4">自定义系统的外观和显示效果</p>

                <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-2">主题模式</label>
                        <div class="flex items-center space-x-4">
                            <label class="cursor-pointer">
                                <input type="radio" name="theme" checked class="sr-only peer">
                                <div class="w-10 h-10 rounded-lg bg-white border-2 border-gray-300 peer-checked:border-primary flex items-center justify-center">
                                    <i class="fa fa-sun-o text-yellow-500"></i>
                                </div>
                                <p class="text-xs mt-1 text-center">浅色模式</p>
                            </label>
                            <label class="cursor-pointer">
                                <input type="radio" name="theme" class="sr-only peer">
                                <div class="w-10 h-10 rounded-lg bg-gray-800 border-2 border-gray-600 peer-checked:border-primary flex items-center justify-center">
                                    <i class="fa fa-moon-o text-gray-300"></i>
                                </div>
                                <p class="text-xs mt-1 text-center">深色模式</p>
                            </label>
                            <label class="cursor-pointer">
                                <input type="radio" name="theme" class="sr-only peer">
                                <div class="w-10 h-10 rounded-lg bg-gradient-to-r from-blue-500 to-purple-600 border-2 border-primary/50 peer-checked:border-primary flex items-center justify-center">
                                    <i class="fa fa-eye text-white"></i>
                                </div>
                                <p class="text-xs mt-1 text-center">跟随系统</p>
                            </label>
                        </div>
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-2">布局密度</label>
                        <select class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-primary/50 focus:border-primary dark:bg-gray-800 dark:text-white">
                            <option>紧凑</option>
                            <option selected>适中</option>
                            <option>宽松</option>
                        </select>
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-2">字体大小</label>
                        <select class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-primary/50 focus:border-primary dark:bg-gray-800 dark:text-white">
                            <option>小</option>
                            <option selected>中</option>
                            <option>大</option>
                            <option>超大</option>
                        </select>
                    </div>
                </div>
            </div>
        </div>
    </main>
</div>
</body>
<script src="/static/js/top.js"></script>
<script src="/static/js/aside.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            adminName: '',
            adminEmail: ''
        },
        mounted() {
            const userInfo = JSON.parse(sessionStorage.getItem('user-info'));
            this.adminName=userInfo.username;
            this.adminEmail=userInfo.email;
        }
    });
</script>
</html>